<!--
 * @Date: 2022-11-12 12:06:29
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-29 14:42:35
 * @FilePath: \vue-admin-ts\src\views\main\system\user\user.vue
 * @Description: user
-->
<template>
  <div class="user_container">
    <page-search
      :searchFormOpt="searchConfig.searchFormOpt"
      @search="searchHandle"
      @reset="reset"
    ></page-search>
    <page-content
      :contentConfig="contentConfig"
      pageName="users"
      title="用户列表"
      ref="pageContentRef"
    ></page-content>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import pageSearch from "@/views/main/components/pageSearch/index.vue";
import { formItems, userTableOptions } from "./options";
import pageContent from "@/views/main/components/pageContent/index.vue";
import { usePageSearch } from "@/hooks/usePageSearch";
import { IPageSearchProps } from "../../components/pageSearch/type";
const [pageContentRef, searchHandle, reset] = usePageSearch();

const searchConfig = reactive<IPageSearchProps>({
  searchFormOpt: {
    formItems: formItems,
    colLayout: {
      span: 8,
    },
    attrs: {
      labelWidth: "100px",
    },
  },
});
const contentConfig = reactive({
  tableOptions: userTableOptions,
  pageConfig: {
    paginationAlign: "right",
  },
  attrs: {
    border: true,
    showIndex: true,
    pagination: true,
    pageSizes: [5, 10, 15, 20],
  },
});
</script>
<style lang="less" scoped>
.user_container {
  padding: 20px 20px 0 20px;
  .table_wrapper {
    margin-top: 20px;
    padding-bottom: 20px;
    .table_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .action_btn {
    margin-left: 30px;
  }
}
</style>
